<template>
  <div >
    <!--    面包屑+新增按钮+批量删除按钮+搜索框和按钮-->
    <div>
      <div style="height: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">课程管理</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="width: 105%;height: 60px;display: flex;flex-direction: row;justify-content:space-between">
        <div style="width: 100%;height: 60px">
          <el-button icon="el-icon-plus" style="margin-left: 10px" @click="bAdd">新增</el-button>
          <el-button icon="el-icon-delete"  @click="batchDelete">批量删除</el-button>
        </div>
<!--        新增弹出框-->
        <div>
          <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="50%"
            >
            <div>
              <el-form  label-width="80px" :model="formAdd">
                <el-form-item label="id" style="display: none">
                  <el-input v-model="formAdd.id"></el-input>
                </el-form-item>
                <el-form-item label="课程名称">
                  <el-input v-model="formAdd.name"></el-input>
                </el-form-item>
                <el-form-item label="授课讲师">
                  <el-select v-model="formAdd.teacher" placeholder="请选择">
                    <el-option label="讲师1" value="xxf"></el-option>
                    <el-option label="讲师2" value="zhf"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="课程类型">
                  <el-radio-group v-model="formAdd.type">
                    <el-radio :label="1" name="type" >公开课</el-radio>
                    <el-radio :label="2" name="type" >内部课</el-radio>
                    <el-radio :label="3" name="type" >定制课</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="课程课时">
                  <el-input v-model="formAdd.hour"></el-input>
                </el-form-item>

                <el-form-item label="课程简介">
                  <el-input type="textarea" v-model="formAdd.brief"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addCourse">确 定</el-button>
            </span>
          </el-dialog>
        </div>
<!--        搜索框-->
        <div style="width: 45%;">
            <el-input v-model="search" placeholder="请输入名称" clearable style="width: 200px"></el-input>
            <el-button  @click="searchName" icon="el-icon-search"></el-button>
        </div>
      </div>
    </div>
<!--    内容展示-->
    <el-table
      border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55px">
        </el-table-column>
        <el-table-column
          prop="name"
          label="课程名称"
          width="120px">
        </el-table-column>
        <el-table-column
          width="200px"
          prop="brief"
          label="课程简介"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="teacher"
          label="授课老师"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="type"
          label="属性"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          width="100px"
          prop="time"
          label="创建时间"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          width="300px"
          label="操作"
          align="center">
          <template v-slot="scope">
            <el-button
              title="修改"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row)"
              ></el-button>
<!--            <el-button title="删除" icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.id)"></el-button>-->
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              style="margin-left: 5px"
              title="您确定删除吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button type="danger" size="mini" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
    </el-table>
<!--    分页功能-->
    <div style="margin: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import requests from "@/axios/axios";

export default {
  name: "courseManage",
  data() {
    return {
      dialogTitle: '',
      //分页
      currentPage: 1,
      total: 0,
      pageSize:5,
      //查询
      search:'',
      //新增表单
      dialogVisible: false,
      formAdd: {
        id: null,
        name: '',
        type: '',
        teacher: '',
        hour: '',
        brief: '',
        time:''
      } ,
      //展示数据内容
      tableData: [{
        brief:'',
        datum:'',
        hour:'',
        id:'',
        image:'',
        name:'',
        teacher:'',
        time:'',
        type:''
      }],
    //  批量删除
      tableChecked: [],//被选中的记录数据，对应批量删除传的参数值
      ids: []//批量删除id
    }
  },
  created() {
    this.getCourse()
  },
  methods: {
    //全选按钮设置
    handleSelectionChange(val) {
      console.log(val)
      this.tableChecked = val
    },
    //批量删除
    batchDelete(){
      this.ids = this.tableChecked.map(v => v.id)// 对象数组转换为[1,2,3]
      console.log(this.ids)
      requests.post("/course/deletesById",this.ids).then(res =>{
        if (res.code === '0'){
          this.$message.success("批量删除成功")
          this.getCourse()//刷新整个列表
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    //查询
    searchName(){
      if (this.search){
        requests.get("/course/queryByName",{params:{name:this.search}}).then(res =>{
          console.log(res.data)
          console.log(this.search)
          //this.tableData=[];
          this.tableData = res.data;
          this.total= res.data.length
        })
      }else {
          this.getCourse()
      }
    },
    //删除
    handleDelete(id){
      console.log(id)
      requests.get("/course/deleteById",{params:{id:id}}).then(res =>{
        if (res.code === '0'){
          this.$message({
            type: "success",
            message: "删除成功"
          })
        }else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.getCourse()//刷新整个列表
      })
    },
    //修改
    edit(row){
      this.dialogTitle = "修改课程"
      this.formAdd = JSON.parse(JSON.stringify(row))//深拷贝
      this.dialogVisible = true
    },
    // 查询获取课程信息
    getCourse (){
      requests.get("/course/findByPage",{
        params:{
          page:this.currentPage,
          size:this.pageSize
        }
        }).then(res =>{
           console.log("res: "+res)
           this.tableData = res.data
      })
      requests.get("/course/getCourses").then(res =>{
        // console.log(res)
        this.total = res.data.length
      })
    },
    //分页
    handleSizeChange(pageSize) {//改变当前每页的个数触发
      console.log(`每页 ${pageSize} 条`);
      this.pageSize = pageSize
      this.getCourse()
    },
    handleCurrentChange(pageNum) {//改变当前页码触发
      console.log(`当前页: ${pageNum}`);
      this.currentPage = pageNum
      this.getCourse()
    },
    //点击新增，打开对话框
    bAdd(){
      this.dialogTitle = "添加课程"
      this.dialogVisible = true
      this.formAdd = {}
    },
    //确认新增和更新列表
    addCourse(){
      console.log(this.formAdd)
      if (this.dialogTitle === "修改课程"){

      //  更新
        requests.post("/course/update",this.formAdd).then(res =>{
          console.log(res)
          if (res.code === '0'){
            this.$message({
              type: "success",
              message: "更新成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.getCourse()//刷新整个列表
          this.dialogVisible = false
        })

      }else{
      //  新增
      //   var param = qs.stringify(this.formAdd)
        requests.post("/course/insert",this.formAdd).then(res =>{
          console.log(res)
          if (res.code === '0'){
            this.$message({
              type: "success",
              message: "新增成功"
            })
          }else{
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.getCourse()//刷新整个列表
          this.dialogVisible = false
        })
      }
    }
  }
};
</script>

<style scoped>

</style>